<div class="form-group" ng-show="fileApiSupported">
    <label for="load-{$ ::key $}" translate>Load {$ ::title $} from a file</label>
    <input id="load-{$ ::key $}" type="file">
</div>

<div class="form-group" ng-class="{ 'has-error': textBytes >= maxBytes }">
  <label for="{$ ::key $}" class="control-label">
    <span>{$ ::title $}</span>
    <span class="hz-icon-required fa fa-asterisk" ng-if="required"></span>
    <span ng-show="textModified"
          translate>
      (Modified)</span>
  </label>
  <span class="pull-right" ng-class="{ 'text-danger': textBytes >= maxBytes }">
    <span translate translate-comment="Strings between {$ and $} should be left untranslated.">
      Content size: {$ (textBytes || 0) | bytes $} of {$ ::maxBytes | bytes $}
    </span>
  </span>
  <textarea class="form-control"
            id="{$ ::key $}"
            name="{$ ::key $}"
            ng-maxlength="::maxBytes"
            ng-model="textContent"
            ng-required="required"
            rows="{$ ::rows $}">
  </textarea>
  <span class="help-block"
        ng-show="textBytes >= maxBytes"
        translate>
    The content is larger than the maximum byte size
  </span>
</div>
